import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "../style.scss";
import { Modal } from "antd-mobile";
import "antd-mobile/dist/antd-mobile.css";
export default function ChangeValue({ value, onClose, onChange }) {
    const [count, setCount] = useState(value);
    const el = useRef(document.createElement("div"));
    useEffect(() => {
        document.querySelector("body").appendChild(el.current);
        el.current.className = "handle-modal";
        return () => {
            document.querySelector("body").removeChild(el.current);
        };
    }, []);
    const onConfirm = () => {
        const temp =count;
        if (temp >= 1) {
            onChange(temp);
            onClose();
        } else {
            Modal.alert("至少一件起售");
            onClose();
        }
    };
    const onValueChange = (ev) => {
        setCount(ev.target.value);
    };
    return ReactDOM.createPortal(
        <div className="handle-warp">
            <h3 className='title'>请选择数量</h3>
            <div className="text">
                <input type="text" value={count} onChange={onValueChange} />
            </div>
            <div className="btn">
                <button onClick={onClose}><span>取消</span></button>
                <button onClick={onConfirm}><span>确定</span></button>
            </div>
        </div>,
        el.current
    );
}
